
<template>
  <div class="filter-condition">
    <span style="font-size: 16px;" class="condition-title">{{ name }}</span>
    <button
      v-for=" (o,index) in field"
      v-show="list"
      :key="index"
      :class="{ischeck:index==current}"
      class="condition-btn"
      @click="changeCondition(index)"> {{ o }}</button>
    <br>
  </div>

</template>
<script >

export default{
  props: {
    // 名称
    'name': {
      type: String,
      default: null
    },
    // 数据列表
    'list': {
      type: Array,
      default: null
    },
    // 实际数据对应的列
    'field': {
      type: Array,
      default: null
    },
    'current': {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      echartField: []
    }
  },
  watch: {
    list: {
      immediate: true,
      handler(val, oldVal) {
      }
    }
  },
  methods: {
    changeCondition(index) {
      this.$emit('listenCondition', index)
    }
  }
}
</script>

<style lang="scss">
.filter-condition{
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  .condition-title{
    width: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .condition-btn{
    width:80px;
    background: none;
    border: none;
    margin: 10px;
  }
  .condition-btn.ischeck{
    background: #02a2ff;
    color: #fff;
  }
  .condition-btn:hover{
    cursor: pointer;
  }
}
</style>
